<!--
@license
Copyright (C) 2018 The Android Open Source Project

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->

<link rel="import" href="../../../bower_components/polymer/polymer.html">

<link rel="import" href="../../../styles/shared-styles.html">
<link rel="import" href="../../shared/gr-button/gr-button.html">
<link rel="import" href="../../shared/gr-icons/gr-icons.html">

<dom-module id="gr-create-change-help">
  <template>
    <style include="shared-styles">
      :host {
        display: block;
      }
      #graphic,
      #help {
        display: inline-block;
        margin: .5em;
      }
      #graphic #circle {
        align-items: center;
        background-color: var(--chip-background-color);
        border-radius: 50%;
        display: flex;
        height: 10em;
        justify-content: center;
        width: 10em;
      }
      #graphic iron-icon {
        color: #9e9e9e;
        height: 5em;
        width: 5em;
      }
      #graphic p {
        color: var(--deemphasized-text-color);
        text-align: center;
      }
      #help {
        padding-top: 1.35em;
        vertical-align: top;
      }
      #help h1 {
        font-size: var(--font-size-large);
      }
      #help p {
        max-width: 35em;
      }
      @media only screen and (max-width: 50em) {
        #graphic {
          display: none;
        }
      }
    </style>
    <div id="graphic">
      <div id="circle">
        <iron-icon id="icon" icon="gr-icons:zeroState"></iron-icon>
      </div>
      <p>
        还没有提交来的审查
      </p>
    </div>
    <div id="help">
      <h1>推送你的第一次修改提交来进行代码审查</h1>
      <p>
        推送代码修改用以审查非常简单，但是和其它的 Git 代码审查工具有一点不同。 点击 创建更改 按钮然后按照一步一步的提示即可。
      </p>
      <gr-button on-tap="_handleCreateTap">创建更改</gr-button>
    </div>
  </template>
  <script src="gr-create-change-help.js"></script>
</dom-module>
